<template>
  <div ref="animation" :style="style"></div>
</template>

<script>
import { ref, nextTick } from 'vue';
import lottie from 'lottie-web';

export default {
  props: ['option', 'json', 'style'],
  setup(props, { emit }) {
    const animation = ref(null)

    nextTick(() => {
      const anim = lottie.loadAnimation(Object.assign({
        container: animation.value,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: props.json
      }, props.option ?? {}))

      emit('create', anim)
    })

    return {
      animation
    }
  }
}
</script>